<template>
  <div>
    <el-row>
      <el-col>
        <div id="content" class="min-h-[500] overflow-auto">
          <el-form :model="form" @submit.native.prevent>
            <grid-layout
              ref="gridlayout"
              :layout.sync="layoutData"
              :is-resizable="false"
              :col-num="colNum"
              :row-height="28"
              :is-draggable="false"
              :is-mirrored="false"
              :vertical-compact="true"
              :margin="[10, 2]"
            >
              <grid-item
                v-for="item in layoutData"
                :key="item.i"
                style="touch-action: none"
                :x="item.x"
                :y="item.y"
                :w="item.w"
                :h="item.h"
                :i="item.i"
              >
                <parameter-card :closable="false" :item="item" :form="form" disabled preview />
              </grid-item>
            </grid-layout>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import VueGridLayout from 'vue-grid-layout'
import ParameterCard from './parameter'

export default {
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
    ParameterCard
  },
  props: {
    info: {
      type: Object
    },
    layout: Array
  },
  data() {
    return {}
  },
  computed: {
    colNum() {
      if (this.info) {
        return this.info.mode === 2 ? 2 : 3
      }
      return 3
    },
    layoutData() {
      return this.layout.filter((_) => _.i !== 'new')
    },
    form() {
      const obj = {}
      this.layout.forEach((_) => {
        obj[_.i] = _.defaultValues
      })
      return obj
    }
  },
  watch: {},
  mounted() {},
  methods: {}
}
</script>

<style>
</style>
